<script setup>
import { ref, getCurrentInstance, reactive, onMounted, watch } from "vue";
import * as echarts from "echarts";
import api from "@/api";
import PdfLoader from "@/utils/html2pdf";
const { proxy } = getCurrentInstance();
import SafeScoreDetail from "./SafeScoreDetail.vue";
import ProcessScoreDetail from "./ProcessScoreDetail.vue";
import EnvironmentScoreDetail from "./EnvironmentScoreDetail.vue";

const props = defineProps({
    currentReportType: "",
    currentDate: "",
    reportId: "",
});

/**
 * 模块选择
 */
const showSafeReport = ref(true);
const showProgressReport = ref(true);
const showEnvironmentReport = ref(true);

/**
 * 日报模块数据
 */
let safeModuleData = reactive({
    score: 1.6,
    reason: "",
    reasonList: [],
    trendType: "bar",
    data: [
        2, 4, 3, 5, 2, 4, 6, 3, 2, 5, 4, 3, 2, 1, 2, 4, 3, 5, 2, 4, 6, 3, 2, 5,
    ],
});

let progressModuleData = reactive({
    score: 0,
    reason: "中海中央园",
    reasonList: [],
    progressDataList: [],
    tableData: [
        {
            buildingNum: "1#",
            stage: "混凝土",
            startTime: "2023-05-29",
            endTime: "2023-05-29",
            alarm: "预警内容",
        },
        {
            buildingNum: "2#",
            stage: "钢筋",
            startTime: "2023-05-29",
            endTime: "2023-05-29",
            alarm: "预警内容",
        },
        {
            buildingNum: "3#",
            stage: "混凝土",
            startTime: "2023-05-29",
            endTime: "2023-05-29",
            alarm: "预警内容",
        },
        {
            buildingNum: "4#",
            stage: "钢筋",
            startTime: "2023-05-29",
            endTime: "2023-05-29",
            alarm: "预警内容",
        },
        {
            buildingNum: "5#",
            stage: "混凝土",
            startTime: "2023-05-29",
            endTime: "2023-05-29",
            alarm: "预警内容",
        },
    ],
    IfShow: false,
});

let environmentModuleData = reactive({
    score: 2,
    reason: "",
    reasonList: [],
    trendType: "bar",
    data: [
        2, 4, 3, 5, 2, 4, 6, 3, 2, 5, 4, 3, 2, 1, 2, 4, 3, 5, 2, 4, 6, 3, 2, 5,
    ],
});

//绘制安全柱状图
function getSafeChart(type) {
    let barChartDom = document.getElementById("safeEchart");
    let myBarChart = echarts.init(barChartDom);
    myBarChart.clear();
    let option = null;
    if (type == "bar") {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            xAxis: {
                type: "category",
                data: [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                ],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000",
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E ",
                    },
                },
            },
            yAxis: {
                type: "value",
                name: "单位：件",
                //nameRotate: '90',
                nameLocation: "end",
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10],
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                },
                splitLine: {
                    //网格线
                    show: true,
                },
            },
            series: [
                {
                    name: "违规事件",
                    data: safeModuleData.data,
                    type: "bar",
                    barWidth: 15,
                    // barGap:'90%'
                    itemStyle: {
                        // 使用方法二的写法
                        color: {
                            type: "linear",
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#E7CFFC", // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: "#8DB6FB", // 100% 处的颜色
                                },
                            ],
                        },
                    },
                },
            ],
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25,
            },
            tooltip: {
                trigger: "axis",
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br>
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            xAxis: {
                type: "category",
                data: [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                ],
                axisLabel: {
                    interval: 0,
                    color: "#000",
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E ",
                    },
                },
            },
            yAxis: {
                type: "value",
                name: "单位：件",
                //nameRotate: '90',
                nameLocation: "end",
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10],
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                },
                splitLine: {
                    //网格线
                    show: true,
                },
            },
            series: [
                {
                    name: "违规事件",
                    data: safeModuleData.data,
                    type: "line",
                    itemStyle: {
                        // 使用方法二的写法
                        color: {
                            type: "linear",
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#E7CFFC", // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: "#8DB6FB", // 100% 处的颜色
                                },
                            ],
                        },
                    },
                },
            ],
        };
    }

    option && myBarChart.setOption(option);
}

function getProgressChart() {
  let treatedFinish = [];
  let treatedOverdue = [];
  let treatedSeriousOverdue = [];
  let xAxisData = [];
  progressModuleData.progressDataList.forEach((item) => {
    xAxisData.push(item.buildingName);
    treatedFinish.push(item.floorFinish);
    treatedOverdue.push(item.floorOverdue);
    treatedSeriousOverdue.push(item.floorseriouslyOverdue);
  });
  let progressReportDom = document.getElementById("dayProgressPartChart");
  let progressReportChart = echarts.init(progressReportDom);
  progressReportChart.clear();
  console.log(xAxisData);
  console.log(treatedFinish);
  console.log(treatedOverdue);
  console.log(treatedSeriousOverdue);
  let option = {
    color: ["#FFD700"],
    grid: {
      x: 40,
      y: 40,
      x2: 20,
      y2: 25,
    },
    legend: {
      itemWidth: 10, // 标志图形的长度
      itemHeight: 10, // 标志图形的宽度
    },
    tooltip: {
      trigger: "axis",
      // formatter(params) {
      //     // 返回值就是html代码可以使用标签
      //     return `
      //         时刻：${params.data.title} </br>
      //         分数：${params.data.value}
      //     `;
      // },
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLabel: {
        interval: 0,
        // rotate: 45,
        color: "#000",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
        lineStyle: {
          color: "#939393 ",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：件",
      //nameRotate: '90',
      nameLocation: "end",
      nameTextStyle: {
        // fontSize: 14,
        padding: [0, 0, 0, -10],
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
      },
      splitLine: {
        //网格线
        show: true,
      },
    },
    series: [
      {
        name: "完成",
        data: treatedFinish,
        type: "bar",
        barWidth: 25,
        stack: "progress",
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#16abf6'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#16BAFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#1457C7", // 100% 处的颜色
              },
            ],
          },
        },
      },
      {
        name: "逾期",
        data: treatedOverdue,
        type: "bar",
        stack: "progress",
        barWidth: 25,
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#fec61d',
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#FFC71E", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#E6B111", // 100% 处的颜色
              },
            ],
          },
        },
      },
      {
        name: "严重逾期",
        data: treatedSeriousOverdue,
        type: "bar",
        stack: "progress",
        barWidth: 25,
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#fc552b'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#E83D17", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#F83C12", // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };
  option && progressReportChart.setOption(option);
}

//绘制环境柱状图
function getEnvironmentChart(type) {
    let barChartDom = document.getElementById("dayEnvironmentEchart");
    let myBarChart = echarts.init(barChartDom);
    myBarChart.clear();
    let option = null;
    if (type == "bar") {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25,
            },
            tooltip: {
                trigger: "axis",
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     return `
                //         时刻：${params.data.title} </br>
                //         分数：${params.data.value}
                //     `;
                // },
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            xAxis: {
                type: "category",
                data: [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                ],
                axisLabel: {
                    interval: 0,
                    // rotate: 45,
                    color: "#000",
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E ",
                    },
                },
            },
            yAxis: {
                type: "value",
                name: "单位：件",
                //nameRotate: '90',
                nameLocation: "end",
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10],
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                },
                splitLine: {
                    //网格线
                    show: true,
                },
            },
            series: [
                {
                    name: "违规事件",
                    data: environmentModuleData.data,
                    type: "bar",
                    barWidth: 15,
                    // barGap:'90%'
                    itemStyle: {
                        // 使用方法二的写法
                        color: {
                            type: "linear",
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#E7CFFC", // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: "#8DB6FB", // 100% 处的颜色
                                },
                            ],
                        },
                    },
                },
            ],
        };
    } else {
        option = {
            color: ["#FFD700"],
            grid: {
                x: 40,
                y: 40,
                x2: 20,
                y2: 25,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                },
            },
            xAxis: {
                type: "category",
                data: [
                    "01",
                    "02",
                    "03",
                    "04",
                    "05",
                    "06",
                    "07",
                    "08",
                    "09",
                    "10",
                    "11",
                    "12",
                    "13",
                    "14",
                    "15",
                    "16",
                    "17",
                    "18",
                    "19",
                    "20",
                    "21",
                    "22",
                    "23",
                    "24",
                ],
                axisLabel: {
                    interval: 0,
                    color: "#000",
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                    lineStyle: {
                        color: "#8E8E8E ",
                    },
                },
            },
            yAxis: {
                type: "value",
                name: "单位：件",
                //nameRotate: '90',
                nameLocation: "end",
                nameTextStyle: {
                    // fontSize: 14,
                    padding: [0, 0, 0, -10],
                },
                axisTick: {
                    show: false, //不显示坐标轴刻度线
                },
                axisLine: {
                    show: true, //不显示坐标轴线
                },
                splitLine: {
                    //网格线
                    show: true,
                },
            },
            series: [
                {
                    name: "违规事件",
                    data: environmentModuleData.data,
                    type: "line",
                    itemStyle: {
                        // 使用方法二的写法
                        color: {
                            type: "linear",
                            x: 0, //右
                            y: 0, //下
                            x2: 0, //左
                            y2: 1, //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#E7CFFC", // 0% 处的颜色
                                },
                                // {
                                //     offset: 0.7,
                                //     color: '#2378f7' // 70% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: "#8DB6FB", // 100% 处的颜色
                                },
                            ],
                        },
                    },
                },
            ],
        };
    }

    option && myBarChart.setOption(option);
}

//根据ID获取设备名称
function getDeviceNameById(id) {
    let name = "";
    for (let i = 0, l = proxy._GLOBAL.DEVICEINFO.length; i < l; i++) {
        if (id === proxy._GLOBAL.DEVICEINFO[i].deviceId) {
            name = proxy._GLOBAL.DEVICEINFO[i].deviceInfo;
            break;
        }
    }
    return name;
}

function html2Pdf() {
    document.getElementsByClassName("dayReportContainer")[0].scrollTop = 0;
    const dayReport = document.getElementsByClassName('dayReportContainer')[0];
    dayReport.style.position = 'absolute';
    dayReport.style.width = 'calc(100% - 253px)';
    dayReport.style.top = "0px";
    dayReport.style.left = '0px';
    const pdfDownLoader = new PdfLoader(dayReport, "fileName", "chartEle"); // fileName -->导出文件名,  question-table -->防止被截断的class名
    pdfDownLoader.outPutPdfFn(`${props.currentDate}${props.currentReportType}`);
    dayReport.style.position = "unset";
    dayReport.style.width = '100%';
}

function initReport() {
    api.report
        .getReportById({
            reportId: props.reportId,
        })
        .then((res) => {
            let resData = res.data[0];
            //安全模块
            let safeData = resData.safetyReport;
            safeModuleData.score = safeData.mark;
            safeModuleData.data = safeData.distribution;
            let safeDeductionList = safeData.deductionDevice.map((item) => {
                return getDeviceNameById(item);
            });
            safeModuleData.reasonList = safeDeductionList;
            if (safeModuleData.reasonList.length > 0) {
                if (safeModuleData.reasonList.length > 2) {
                    safeModuleData.reason = `${safeModuleData.reasonList[0]}、${safeModuleData.reasonList[1]} 等`;
                } else if (safeModuleData.reasonList.length == 2) {
                    safeModuleData.reason = `${safeModuleData.reasonList[0]}、${safeModuleData.reasonList[1]}`;
                } else {
                    safeModuleData.reason = safeModuleData.reasonList[0];
                }
            } else {
                safeModuleData.reason = "无";
            }
            getSafeChart("bar");
            //进度模块
            let progressData = resData.progressReport;
            progressModuleData.score = progressData.mark;
            let progressDeductionList = progressData.deductionDevice.map((item) => {
                return getDeviceNameById(item);
            });
            progressModuleData.reasonList = progressDeductionList;
            if (progressModuleData.reasonList.length > 0) {
                if (progressModuleData.reasonList.length > 2) {
                    progressModuleData.reason = `${progressModuleData.reasonList[0]}、${progressModuleData.reasonList[1]} 等`;
                } else if (progressModuleData.reasonList.length == 2) {
                    progressModuleData.reason = `${progressModuleData.reasonList[0]}、${progressModuleData.reasonList[1]}`;
                } else {
                    progressModuleData.reason = progressModuleData.reasonList[0];
                }
            } else {
                progressModuleData.reason = "无";
            }
            console.log(progressData.progressInfoList);
    if (
        progressData.progressInfoList == null ||
        progressData.progressInfoList == undefined
      ) {
        progressModuleData.IfShow = false;
      } else {
        progressModuleData.IfShow = true;
        for(let i=0;i<progressData.progressInfoList.length;i++){
            if(progressData.progressInfoList[i].buildingName == "7号楼塔吊球机" || progressData.progressInfoList[i].buildingName == "9号楼塔吊球机" || progressData.progressInfoList[i].buildingName == "11号楼塔吊球机" ||progressData.progressInfoList[i].buildingName == "幼儿园塔吊球机"){
                progressData.progressInfoList[i].floorseriouslyOverdue -=1
            }
        }
        progressModuleData.progressDataList = progressData.progressInfoList;
        getProgressChart();
      }
            //环境模块
            let leanData = resData.leanReport;
            environmentModuleData.score = leanData.mark;
            environmentModuleData.data = leanData.distribution;
            let leanDeductionList = leanData.deductionDevice.map((item) => {
                return getDeviceNameById(item);
            });
            environmentModuleData.reasonList = leanDeductionList;
            if (environmentModuleData.reasonList.length > 0) {
                if (environmentModuleData.reasonList.length > 2) {
                    environmentModuleData.reason = `${environmentModuleData.reasonList[0]}、${environmentModuleData.reasonList[1]} 等`;
                } else if (environmentModuleData.reasonList.length == 2) {
                    environmentModuleData.reason = `${environmentModuleData.reasonList[0]}、${environmentModuleData.reasonList[1]}`;
                } else {
                    environmentModuleData.reason = environmentModuleData.reasonList[0];
                }
            } else {
                environmentModuleData.reason = "无";
            }
            getEnvironmentChart("bar");
        });
}

function switchSafeTrendChart(type) {
    safeModuleData.trendType = type;
    getSafeChart(type);
}

function switchEnvironmentTrendChart(type) {
    environmentModuleData.trendType = type;
    getEnvironmentChart(type);
}

onMounted(() => {
    initReport();
});

watch(
    () => props.reportId,
    (newVal, oldVal) => {
        initReport();
    }
);
</script>

<template>
    <div id="dailyReport">
        <div class="dayReportContent">
            <div class="header">
                <span class="detail">{{ currentDate }}{{ currentReportType }}</span>
                <el-checkbox v-model="showSafeReport" label="安全模块" size="large" />
                <el-checkbox v-model="showProgressReport" label="进度模块" size="large" />
                <el-checkbox v-model="showEnvironmentReport" label="环境模块" size="large" />
                <div class="exportBtn" @click="html2Pdf">导出 Pdf</div>
            </div>
            <div class="dayReportContainer">
                <div class="safeModule" v-show="showSafeReport">
                    <div class="title">
                        <span class="titleName">安全模块日报</span>
                        <span class="score">安全模块当日得分为：
                            <el-tooltip placement="right-end" effect="light">
                                <template #content>
                                    <!-- <scoreDetail></scoreDetail> -->
                                    <SafeScoreDetail></SafeScoreDetail>
                                </template>
                                <img class="infoImg" src="@/assets/images/report/info.png" />
                            </el-tooltip>
                            <span class="colorText">{{
                                safeModuleData.score
                            }}</span></span>
                        <span class="reason">扣分设备为：<span class="colorText">{{
                            safeModuleData.reason
                        }}</span></span>

                        <div class="fastChange">
                            <div :class="[
                                        safeModuleData.trendType == 'bar' ? 'active' : '',
                                        'bar',
                                    ]" @click="switchSafeTrendChart('bar')"></div>
                            <div :class="[
                                safeModuleData.trendType == 'line' ? 'active' : '',
                                'line',
                            ]" @click="switchSafeTrendChart('line')"></div>
                        </div>
                    </div>
                    <div id="safeEchart" class="chartEle"></div>
                </div>
                <div class="progressModule" v-show="showProgressReport">
                    <div class="title">
                        <span class="titleName">进度模块日报</span>
                        <span class="score">进度模块当日得分为：
                            <el-tooltip placement="right-end" effect="light">
                                <template #content>
                                    <!-- <scoreDetail></scoreDetail> -->
                                    <ProcessScoreDetail></ProcessScoreDetail>
                                </template>
                                <img class="infoImg" src="@/assets/images/report/info.png" />
                            </el-tooltip>
                            <span class="colorText">{{
                                progressModuleData.score
                            }}</span></span>
                        <span class="reason">扣分设备为：<span class="colorText">{{
                            progressModuleData.reason
                        }}</span></span>
                    </div>
                    <div id="dayProgressPartChart" class="chartEle"></div>
                    <!-- <div class="progressTabel chartEle">
                        <el-table :data="progressModuleData.tableData" stripe style="width: 100%"
                            :header-cell-style="{ background: '#ECEDFF' }">
                            <el-table-column prop="buildingNum" label="楼号" align="center" />
                            <el-table-column prop="stage" label="当前阶段" align="center" />
                            <el-table-column prop="startTime" label="本层开始时间" align="center" />
                            <el-table-column prop="endTime" label="计划结束时间" align="center" />
                            <el-table-column prop="alarm" label="预警" align="center" />
                        </el-table>
                    </div> -->
                </div>
                <div class="environmentModule" v-show="showEnvironmentReport">
                    <div class="title">
                        <span class="titleName">环境模块日报</span>
                        <span class="score">环境模块当日得分为：
                            <el-tooltip placement="right-end" effect="light">
                                <template #content>
                                    <!-- <scoreDetail></scoreDetail> -->
                                    <EnvironmentScoreDetail></EnvironmentScoreDetail>
                                </template>
                                <img class="infoImg" src="@/assets/images/report/info.png" />
                            </el-tooltip>
                            <span class="colorText">{{
                                environmentModuleData.score
                            }}</span></span>
                        <span class="reason">扣分设备为：<span class="colorText">{{
                            environmentModuleData.reason
                        }}</span></span>
                        <div class="fastChange">
                            <div :class="[
                                        environmentModuleData.trendType == 'bar' ? 'active' : '',
                                        'bar',
                                    ]" @click="switchEnvironmentTrendChart('bar')"></div>
                            <div :class="[
                                environmentModuleData.trendType == 'line' ? 'active' : '',
                                'line',
                            ]" @click="switchEnvironmentTrendChart('line')"></div>
                        </div>
                    </div>
                    <div id="dayEnvironmentEchart" class="chartEle"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#dailyReport {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .dayReportContent {
        width: 100%;

        .header {
            width: 100%;

            .detail {
                display: inline-block;
                font-size: 16px;
                font-family: Source Han Sans SC;
                font-weight: 500;
                padding: 0 10px;
                margin: 0px 35px 0px 15px;
                background-color: #efeefe;
                border: 1px solid white;
                border-radius: 5px;
            }

            .exportBtn {
                display: inline-block;
                float: right;
                width: 66px;
                height: 30px;
                color: white;
                line-height: 30px;
                padding-left: 30px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url("@/assets/images/report/export.png");
                cursor: pointer;
            }
        }

        .dayReportContainer {
            width: 100%;
            height: calc(100vh - 130px);
            overflow-y: auto;
            overflow-x: hidden;


            .safeModule {
                width: 100%;
                height: 300px;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #eef3fd;
                box-shadow: 0px 0px 4px 0px #eceefc;
                border-radius: 6px;
                background-color: white;

                #safeEchart {
                    width: 100%;
                    height: 240px;
                }
            }

            .progressModule {
                width: 100%;
                height: 300px;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #eef3fd;
                box-shadow: 0px 0px 4px 0px #eceefc;
                border-radius: 6px;
                background-color: white;
                #dayProgressPartChart {
          width: 100%;
          height: 240px;
        }
            }

            .environmentModule {
                //width: 1640px;
                width: 100%;
                height: 300px;
                margin: 0 auto;
                margin-top: 10px;
                border: 1px solid #eef3fd;
                box-shadow: 0px 0px 4px 0px #eceefc;
                border-radius: 6px;
                background-color: white;

                #dayEnvironmentEchart {
                    width: 100%;
                    height: 240px;
                }
            }
        }
    }
}

.title {
    position: relative;
    height: 50px;
    line-height: 40px;

    .titleName {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        margin-left: 10px;
        padding-left: 5px;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 600;
        border-left: 3px solid #8f93f7;
    }

    .score {
        padding-left: 15px;
    }

    .reason {
        padding-left: 25px;
    }

    .fastChange {
        position: absolute;
        top: 11px;
        right: 24px;
        z-index: 99999;

        .bar {
            display: inline-block;
            width: 22px;
            height: 22px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("@/assets/images/report/zhu.png");
            cursor: pointer;

            &.active {
                background-image: url("@/assets/images/report/zhuA.png");
            }
        }

        .line {
            display: inline-block;
            width: 22px;
            height: 22px;
            margin-left: 13px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("@/assets/images/report/zhe.png");
            cursor: pointer;

            &.active {
                background-image: url("@/assets/images/report/zheA.png");
            }
        }
    }
}

.colorText {
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #8f93f7;
    padding-left: 10px;
}

.infoImg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
}
</style>